<template>
    <view class="cn-component-form">
        <view class="cu-form-group" @tap="_tap" :class="[radius?radius:'']" style="font-size: 30rpx;">
            <view v-if="icon" :class="icon" class="text-deep-nddyny flex-s0"></view>
            <view v-if="title2 != null" class="padding-tb-26 flex-s0">
                <view>
                    {{title}}
                </view>
                <view class="text-gray text-sm margin-top-10">
                    {{title2}}
                </view>
            </view>
            <view v-else-if="title != null" class="title self-start flex-s0 flex" :style="'font-size: 30rpx; padding-top: 18rpx;'"
                style="position: relative;">
                <text v-if="is_must" class="text-red" style="position: absolute; left: -18rpx; top: 6rpx">*</text>
                <view :style="'width: calc('+titleEm+'em);'">{{title}}</view>
                <text class="margin-left-10 text-nddyny text-sm">{{title_number}}</text>
            </view>
            <slot name="left"></slot>
            <!-- _____________________________________ -->
            <!-- _____________________________________ -->
            <!-- _____________________________________ -->
            <!-- input -->
            <template v-if="type == null || value || value == 0">
                <template v-if="value || value == 0">
                    <!-- image -->
                    <view v-if="type == 'image'" class="text-13">
                        <text class="text-nddyny">{{value+''}}</text>
                        <text class="cuIcon-delete margin-left-10" @tap="data.form[field] = ''"></text>
                    </view>
                    <!-- textarea -->
                    <view v-else-if="type == 'textarea' || type == 'checkbox'">
                        <text class="text-nddyny text-sm">{{value+''}}</text>
                    </view>
                    <view v-else :class="class_value" class="padding-right-20">{{value+''}}</view>
                </template>
                <input v-else-if="data && data.form && !field2" :class="[class_input, text_lr!='left'&&(text_lr=='right'||disabled==true)?'text-right':'']"
                    :placeholder="n_placeholder" :value="data_form_field" @input="_changeInput" @confirm="()=>{confirm?confirm():''}"
                    :password="password" :disabled="disabled" :type="format || 'text'" :maxlength="maxlength"></input>
                <view v-else-if="data && data.form && field2" :class="field2?'flex flex-g1':''">
                    <view :style="!format && field2 ? 'width: 198rpx' : ''">
                        <input :class="[class_input, text_lr!='left'&&(text_lr=='right'||disabled==true)?'text-right':'']"
                            :placeholder="n_placeholder" :value="data.form[field]" @input="_changeInput" @confirm="()=>{confirm?confirm():''}"
                            :password="password" :disabled="disabled" :type="!format && field2 ? 'number' : format"
                            :maxlength="maxlength"></input>
                    </view>
                    <template v-if="data && data.form && field2">
                        <view class="padding-left-10 padding-right-20">到</view>
                        <view :style="!format && field2 ? 'width: 198rpx' : ''">
                            <input :class="[class_input, text_lr!='left'&&(text_lr=='right'||disabled==true)?'text-right':'']"
                                :placeholder="placeholder2" :value="data.form[field2]" @input="_changeInput2" @confirm="()=>{confirm?confirm():''}"
                                :password="password" :disabled="disabled" :type="format || 'number'" :maxlength="maxlength"></input>
                        </view>
                    </template>
                </view>
            </template>
            <!-- checkbox_fields 多选 把选中data[field]的值变成1 -->
            <view v-else-if="type == 'checkbox_fields'" class="flex align-center justify-start" :class="[text_lr!='left'&&(text_lr=='right'||disabled==true)?'':'flex-g1']">
                <button v-for="(checkbox_value, checkbox_key) in checkbox_values" :key="checkbox_key" :class="data.form[checkbox_key]=='1'?'bg-nddyny':''"
                    @tap="()=>{disabled==true?'':_changeCheckboxFields(checkbox_key)}" class='cu-btn margin-right-20 shadow'>{{checkbox_value}}</button>
            </view>
            <!-- switch 单个的switch按钮 比如是否上架 -->
            <view v-else-if="type == 'switch'" class="flex align-center">
                <slot name="switchLeft"></slot>
                <switch class='nddyny radius' @change="_changeSwitch" :class="data.form[field] == 0 ? '' : 'checked'"
                    :checked="data.form[field] == 0 ? false : true" :disabled="disabled"></switch>
            </view>
            <!-- radio 单选 在一行内显示 比如要兑换推广奖励的类型是金券还是提现红包 -->
            <radio-group v-else-if="type == 'radio'" class="radio-group flex align-center justify-start" :class="[text_lr!='left'&&(text_lr=='right'||disabled==true)?'':'flex-g1']"
                @change="_changeRadio">
                <template v-for="(radio_value, radio_key) in radio_values">
                    <radio class='nddyny' :class="data.form[field]==radio_key?'checked':''" :checked="data.form[field]==radio_key?true:false"
                        :value="radio_key">
                    </radio>
                    <view class="margin-left-10 margin-right-30">{{radio_value}}</view>
                </template>
            </radio-group>
            <!-- radio_list 单选 在dialog中显示一个列表 -->
            <view v-else-if="type == 'radio_list'" class="flex-g1" @tap="dialogRadioListShow">
                <input :placeholder="n_placeholder" :value="radio_key_list && radio_key_list[data.form[field]] && radio_key_list[data.form[field]].name ? radio_key_list[data.form[field]].name : (radio_key_list[data.form[field]] ? radio_key_list[data.form[field]] : '')"
                    :disabled="true"></input>
            </view>
            <!-- radio_is 单选 参数为['男','女'] 选中第一个值为0 选中第二个值为1 -->
            <radio-group v-else-if="type == 'radio_is'" class="radio-group flex align-center justify-start" :class="[text_lr!='left'&&(text_lr=='right'||disabled==true)?'':'flex-g1']"
                @change="_changeRadioIs">
                <radio class="nddyny" :class="data.form[field]==0&&data.form[field]!=''?'checked':''" :checked="data.form[field]==0&&data.form[field]!=''?true:false"
                    value="0"></radio>
                <view class="margin-left-10 margin-right-30">{{radio_values[0]}}</view>
                <radio class="nddyny" :class="data.form[field]==1?'checked':''" :checked="data.form[field]==1?true:false"
                    value="1"></radio>
                <view class="margin-left-10">{{radio_values[1]}}</view>
            </radio-group>
            <!-- radio_tag_optional 单选 功能和radio一样 样式为button -->
            <view v-else-if="type == 'radio_tag_optional'" style="margin-top: -10rpx; padding: 16rpx 0;" class="flex-g1">
                <button class='cu-btn margin-right-20 shadow margin-top-10' :class="[data.form[field]==radio_key?'bg-nddyny':'']"
                    v-for="(radio_value, radio_key) in radio_values" :key="radio_key" @tap="_changeRadioTagOptional"
                    :data-radio_key="radio_key">{{radio_value}}</button>
            </view>
            <!-- date_to_date -->
            <view v-else-if="type == 'date_to_date'" class="flex-g1 flex" :class="[text_lr!='left'&&(text_lr=='right'||disabled==true)?'justify-end':'justify-start']">
                <view class="flex align-center" style="width: 410rpx;">
                    <picker class="date_to_date_picker" mode="date" :start="$store.state.user.user_asset_log_date_start"
                        :end="new Date() | dateFormat('yyyy-MM-dd')" :value.sync="data.form[field]" @change="_changeDateToDateStart">
                        <view class="text-underline">
                            <view class="text-13" v-if="data.form[field]">{{data.form[field] | dateFormat('yyyy-MM-dd')}}</view>
                            <view v-else class="text-gray text-center">开始时间</view>
                        </view>
                    </picker>
                    <view class="padding-lr-10">至</view>
                    <picker class="date_to_date_picker" mode="date" :start="$store.state.user.user_asset_log_date_start"
                        :end="new Date() | dateFormat('yyyy-MM-dd')" :value.sync="data.form[field2]" @change="_changeDateToDateEnd">
                        <view class="text-underline">
                            <view class="text-13" v-if="data.form[field2]">{{data.form[field2] | dateFormat('yyyy-MM-dd')}}</view>
                            <view v-else class="text-gray text-center">结束时间</view>
                        </view>
                    </picker>
                    <text class="cuIcon-refresh margin-left-20" @tap="dateToDateClear"></text>
                </view>
            </view>
            <!-- time_to_time -->
            <view v-else-if="type == 'time_to_time'" class="flex-g1 flex" :class="[text_lr!='left'&&(text_lr=='right'||disabled==true)?'justify-end':'justify-start']">
                <view class="flex align-center" style="width: 290rpx;">
                    <picker class="time_to_time_picker" mode="time" :value.sync="data.form[field]" @change="_changeTimeToTimeStart">
                        <view class="text-underline">
                            <view>{{data.form[field] | timeFormat('hh:mm')}}</view>
                        </view>
                    </picker>
                    <view class="padding-lr-20">至</view>
                    <picker class="time_to_time_picker" mode="time" :value.sync="data.form[field2]" @change="_changeTimeToTimeEnd">
                        <view class="text-underline">
                            <view v-if="data.form[field2]*1==0||data.form[field2]==2359">24:00</view>
                            <view v-else>{{data.form[field2] | timeFormat('hh:mm')}}</view>
                        </view>
                    </picker>
                    <view class="margin-left-20" @tap="timeToTimeClear">
                        <text class="cuIcon-refresh"></text>
                    </view>
                </view>
            </view>
            <!-- _____________________________________ -->
            <!-- _____________________________________ -->
            <!-- _____________________________________ -->

            <view v-if="type == 'radio_list'" class="cuIcon-right"></view>
            <view v-if="is_close_btn" class="cuIcon-close" @tap="__changeCommon($event, null, '', field)"></view>
            <slot name="right"></slot>
        </view>
        <view v-if="(data && data.formtag && data.formtag[field]) 
        || (tag_data && tag_data.formtag && tag_data.formtag[tag_field])
        || (upload_data && upload_data.formtag && upload_data.formtag[field])"
            class="cn-form-tag" :class="class_tag" :style="style_tag">
            <view class="cn-form-tag-value">
                <template v-if="page.is_tag_sort_value_title !== true">{{title}}</template>
                {{page.tag_value || (upload_data ? upload_data.formtag[field] : (tag_data ? tag_data.formtag[tag_field] : data.formtag[field]))}}
                <template v-if="page.is_tag_sort_value_title === true">{{title}}</template>
            </view>
        </view>
        <!-- image -->
        <view v-if="type == 'image'" class="cu-form-group padding-bottom-10" style="border-top: 0; margin-top: -10rpx;"
            @tap="_tap">
            <image v-if="data.form[field]" @tap="_changeImage" :src="data.form[field] | ossUrl(image_width||690)"
                :style="'width: '+(image_width||690)+'rpx; height: '+(image_height||690)+'rpx;'" :mode="image_mode || 'widthFix'"
                class="margin-bottom-20"></image>
            <text v-else @tap="_changeImage" class='cuIcon-camera' style="font-size: 128rpx; margin-top: -10rpx;"></text>
        </view>
        <!-- textarea -->
        <view v-else-if="type == 'textarea'" class="cu-form-group bg-white" :class="[radius?radius:'']" style="border-top: 0; margin-top: -30rpx;"
            @tap="_tap">
            <textarea v-if="data && data.form" class="flex-g1" :class="class_textarea" :placeholder="n_placeholder"
                :value="data.form[field]" @input="_changeInput" :disabled="disabled" :maxlength="maxlength" :style="'height:'+((row?row:4)*1.15)+'em'"></input>
            <view v-else-if="value" :class="class_value" class="padding-right-20">{{value}}</textarea>
        </view>
        <!-- checkbox -->
        <view v-else-if="type == 'checkbox'" class="bg-white padding-lr-20 padding-bottom-40" style="border-top: 0; margin-top: -16rpx;"
            @tap="_tap">
            <view class="flex flex-wrap">
                <view v-for="(checkbox_info, key) in checkbox_list" :key="key" class="margin-top-10 padding-lr-6"
                    :class="[checkbox_basis?('basis-'+checkbox_basis):'']">
                    <button class='cu-btn shadow flex-g1 padding-lr-10 width-100p' :class="[
                            checkbox_disableds.includes(checkbox_info.value)?'bg-disabled':'',
                            data.form[field].includes(checkbox_info.value)?'bg-nddyny':''
                        ]"
                        @tap="()=>{checkbox_disableds.includes(checkbox_info.value)?'':_changeCheckbox(checkbox_info.value)}">
                        {{checkbox_info.title || checkbox_info.label}}
                    </button>
                </view>
            </view>
        </view>
        <!-- radio_list -->
        <modalDialog v-if="radio_list" ref="radio_list_dialog" :show.sync="radio_list_dialog.show" :title="n_placeholder"
            :cancel="dialogRadioListCancel" :confirm="dialogRadioListConfirm" :is_scroll_content="true">
            <template #content>
                <radio-group class="block" @change="dialogRadioListChange">
                    <view class="cu-list menu">
                        <nMenuItemContentAction v-for="(info, key) in radio_key_list" :key="key">
                            <template #content>
                                <label class="flex justify-between align-center">
                                    {{info.name || info}}
                                    <radio class="nddyny" :class="key==radio_list_dialog.value?'checked':''" :checked="key==radio_list_dialog.value?true:false"
                                        :value="key"></radio>
                                </label>
                            </template>
                        </nMenuItemContentAction>
                    </view>
                </radio-group>
            </template>
        </modalDialog>
    </view>
</template>

<script>
    export default {
        props: [
            // 通用
            'icon', 'title', 'title_number', 'placeholder', 'type', 'tap', 'data', 'field', 'is_must', 'radius',
            // 追加
            'password', 'disabled', 'title_em', 'text_lr', 'title2', 'value', 'format', 'field2', 'placeholder2',
            'tag_data', 'tag_field', 'maxlength', 'row', 'tag_value', 'is_tag_sort_value_title', 'is_close_btn',
            'is_0_then_empty', 'is_n1_then_empty',
            // class
            'class_input', 'class_tag', 'class_value', 'class_textarea',
            // style
            'style_tag',
            // input
            'changeInput', 'changeSwitch', 'changeCheckbox',
            'changeRadio', 'changeRadioIs', 'changeRadioTagOptional', 'changeRadioList',
            'changeDateToDateStart', 'changeDateToDateEnd',
            'changeTimeToTimeStart', 'changeTimeToTimeEnd',
            'changeImage',
            // radio
            'radio_values', 'radio_default_value', 'radio_list',
            // checkbox
            'checkbox_values', 'checkbox_default_value', 'changeCheckboxFields', 'checkbox_list', 'checkbox_basis',
            'checkbox_disableds',
            // image
            'image_width', 'image_height', 'image_mode', 'upload_data',
        ],
        data() {
            return {
                imgList: [],
                radio_list_dialog: {
                    show: false,
                    value: '',
                },
                page: {
                    tag_value: null,
                    is_tag_sort_value_title: null,
                },
                n_placeholder: null
            }
        },
        created() {
            if (this.format == 'digit' && this.data.form[this.field] != '') {
                this.data.form[this.field] = this.$nddyny.number.floor(this.data.form[this.field]);
            }
            if (this.tag_value) {
                this.page.tag_value = this.tag_value;
            }
            if (this.is_tag_sort_value_title) {
                this.page.is_tag_sort_value_title = this.is_tag_sort_value_title;
            }
            this.n_placeholder = this.placeholder;
            if (this.type) {
                let field_array = [
                    'image',
                    'checkbox',
                    'checkbox_fields',
                    'switch',
                    'radio',
                    'radio_list',
                    'radio_is',
                    'radio_tag_optional',
                    'date_to_date',
                    'time_to_time'
                ];
                if (field_array.includes(this.type)) {
                    if (!this.page.tag_value) {
                        this.page.tag_value = "请选择";
                    }
                    if (!this.page.is_tag_sort_value_title) {
                        this.page.is_tag_sort_value_title = true;
                    }
                    if (!this.n_placeholder) {
                        this.n_placeholder = '请选择' + this.title;
                    }
                }
            }
            if (!this.n_placeholder) {
                this.n_placeholder = '请填写' + this.title;
            }
        },
        computed: {
            radio_key_list() {
                if (!this.radio_list) {
                    return [];
                }
                if (this.$nddyny.types.isObject(this.radio_list)) {
                    return this.radio_list;
                }
                let radio_key_list = {};
                this.radio_list.forEach(info => {
                    radio_key_list[info[this.field]] = info;
                })
                return radio_key_list;
            },
            data_form_field() {
                if ((this.is_0_then_empty && this.data.form[this.field] == 0) ||
                    (this.is_n1_then_empty && this.data.form[this.field] == -1)) {
                    return '';
                }
                let value = this.data.form[this.field];
                if (this.format == 'digit') {
                    let value_info = value.toString().split(".");
                    if (value_info && value_info[1] && value_info[1].length > 2) {
                        value = this.$nddyny.number.floor(value);
                    }
                }
                return value;
            },
            titleEm() {
                return this.title_em ? this.title_em : this.title.length;
            }
        },
        methods: {
            _tap() {
                if (this.tap) {
                    this.tap();
                }
            },
            __changeCommon(e, callback_change, value, field) {
                if (!field) {
                    field = this.field;
                }
                if (this.data.formtag && this.data.formtag[field]) {
                    this.data.formtag[field] = '';
                }
                if (this.upload_data) {
                    this.upload_data.form[field] = '';
                    this.$emit('update:upload_data', this.upload_data);
                }
                if (callback_change) {
                    callback_change(e);
                } else {
                    this.data.form[field] = value;
                    this.$emit('update:data', this.data);
                }
            },
            _changeInput(e) {
                this.__changeCommon(e, this.changeInput, e.target.value);
            },
            _changeInput2(e) {
                this.__changeCommon(e, this.changeInput, e.target.value, this.field2);
            },
            _changeCheckbox(value) {
                let values = this.data.form[this.field];
                let index = values.indexOf(value);
                if (index == -1) {
                    values.push(value);
                } else {
                    values.splice(index, 1);
                }
                this.__changeCommon(null, this.changeCheckbox, values);
            },
            _changeCheckboxFields(field) {
                this.__changeCommon(null, this.changeCheckboxFields, this.data.form[field] == '1' ? '0' : '1', field);
            },
            _changeSwitch(e) {
                this.__changeCommon(e, this.changeSwitch, e.target.value ? '1' : '0');
            },
            _changeRadio(e) {
                this.__changeCommon(e, this.changeRadio, e.target.value);
            },
            _changeRadioIs(e) {
                this.__changeCommon(e, this.changeRadioIs, e.target.value);
            },
            _changeRadioTagOptional(e) {
                this.__changeCommon(e, this.changeRadioTagOptional,
                    this.data.form[this.field] == e.target.dataset.radio_key ? this.radio_default_value : e.target.dataset
                    .radio_key);
            },
            _changeRadioList(value) {
                this.__changeCommon(null, this.changeRadioList, value);
            },
            _changeDateToDateStart(e) {
                this.__changeCommon(e, this.changeDateToDateStart, this.$nddyny.date.format(e.target.value, 'yyyyMMdd'),
                    this.field);
            },
            _changeDateToDateEnd(e) {
                this.__changeCommon(e, this.changeDateToDateEnd, this.$nddyny.date.format(e.target.value, 'yyyyMMdd'),
                    this.field2);
            },
            _changeTimeToTimeStart(e) {
                let value = this.setimeToTimeStartValueAndTimeToTimeEndValue(e, 'start');
                this.__changeCommon(e, this.changeTimeToTimeStart, value, this.field);
            },
            _changeTimeToTimeEnd(e) {
                let value = this.setimeToTimeStartValueAndTimeToTimeEndValue(e, 'end');
                this.__changeCommon(e, this.changeTimeToTimeEnd, value, this.field2);
            },
            setimeToTimeStartValueAndTimeToTimeEndValue(e, field_type) {
                let value = this.$nddyny.time.format(e.target.value, 'hhmm');
                if (value == '2359') {
                    value = '0';
                }
                if (field_type == 'start') {
                    if (value * 1 > this.data.form[this.field2] * 1) {
                        let end_value = this.data.form[this.field2];
                        this.__changeCommon(e, this.changeTimeToTimeEnd, value, this.field2);
                        value = end_value;
                    }
                } else if (field_type == 'end') {
                    if (this.data.form[this.field] * 1 > value * 1) {
                        let start_value = this.data.form[this.field];
                        this.__changeCommon(e, this.changeTimeToTimeStart, value, this.field);
                        value = start_value;
                    }
                }
                return value;
            },
            _changeImage(e) {
                uni.chooseImage({
                    count: 1,
                    sizeType: ['compressed'],
                    sourceType: ['album', 'camera'],
                    success: (res) => {
                        this.__changeCommon(e, this.changeImage, res.tempFiles[0].path);
                    }
                });
            },
            dateToDateClear(e) {
                this.__changeCommon(e, null, '', this.field);
                this.__changeCommon(e, null, '', this.field2);
            },
            timeToTimeClear(e) {
                this.__changeCommon(e, null, '0', this.field);
                this.__changeCommon(e, null, '0', this.field2);
            },
            dialogRadioListChange(e) {
                this.radio_list_dialog.value = e.target.value;
            },
            dialogRadioListShow(e) {
                this.radio_list_dialog.value = this.data.form[this.field];
                this.radio_list_dialog.show = true;
            },
            dialogRadioListCancel(e) {
                this.radio_list_dialog.value = this.data.form[this.field];
                this.radio_list_dialog.show = false;
            },
            dialogRadioListConfirm(e) {
                this._changeRadioList(this.radio_list_dialog.value);
                this.dialogRadioListCancel(e);
            }
        },
    }
</script>

<style lang="less">
    .date_to_date_picker,
    .time_to_time_picker {
        padding-right: 0;
    }

    .date_to_date_picker::after,
    .time_to_time_picker::after {
        content: normal;
    }
</style>
